<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :title="drawerTitle[drawerType]"
    size="60%"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer tag-album-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form
          :model="editForm"
          label-width="100px"
          :rules="editFormRules"
          ref="editForm"
          class="editForm"
          @keyup.enter.native="submit()"
        >
          <el-form-item prop="albumNm" label="专辑名称">
            <el-input placeholder="请输入专辑名称" v-model="editForm.albumNm"></el-input>
          </el-form-item>
          <el-form-item prop="albumDesc" label="专辑描述">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入专辑描述"
              v-model="editForm.albumDesc"
              maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item prop="level" label="公开等级">
            <!-- <el-row>公开等级</el-row> -->
            <el-row>
              <ul class="clearfix">
                <li
                  v-for="dict in $dictList('album_open_level')"
                  :key="dict.key"
                  :class="{ active: level === dict.key }"
                  @click="level = dict.key"
                >
                  {{ dict.value }}
                </li>
              </ul>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增数据专辑',
        edit: '编辑数据专辑'
      },
      editForm: {
        assetAlbumId: '',
        albumNm: '',
        albumDesc: ''
      },
      editFormRules: {
        albumNm: [
          { required: true, message: '专辑名称不能为空', trigger: 'blur' },
          { max: 30, message: '长度不能超过30个字符', trigger: 'blur' }
        ],
        albumDesc: [
          { required: true, message: '专辑描述不能为空', trigger: 'blur' },
          { max: 500, message: '长度不能超过500个字符', trigger: 'blur' }
        ]
      },
      level: 3
    }
  },
  methods: {
    showDrawer(params) {
      this.type = params && params.type ? params.type : 'add'
      if (this.type === 'edit') {
        this.editForm.assetAlbumId = params.dataAssetId
        this.editForm.albumNm = params.cname
        this.editForm.albumDesc = params.desc
        this.level = params.openLevel
      }
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            albumNm: this.editForm.albumNm,
            albumDesc: this.editForm.albumDesc,
            openLevel: this.level
          }
          let url = this.type === 'edit' ? 'ast/astAlbum/update' : 'ast/astAlbum/save'
          if (this.type === 'edit') params.assetAlbumId = this.editForm.assetAlbumId
          this.$ajax({
            url: this.$ajax.setUrl(url),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('callback')
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDialog() {
      this.editForm.assetAlbumId = ''
      this.editForm.albumNm = ''
      this.editForm.albumDesc = ''
      this.level = 3
      this.dataAsset = {}
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.tag-album-drawer {
  .el-select {
    width: 100%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      float: left;
      padding: 10px 50px;
      margin: 20px 20px 0 0;
      border: 1px solid $border-color;
      line-height: normal;
      cursor: pointer;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      &.active {
        color: $theme-color;
        border-color: $theme-color;
        &:before {
          display: block;
          width: 30px;
          height: 50px;
          content: '';
          background-color: $theme-color;
          position: absolute;
          right: -10px;
          bottom: -25px;
          transform: rotate(45deg);
        }
        &:after {
          width: 13px;
          height: 16px;
          content: '\2714';
          color: #fff;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
</style>
